<template>
  <div class="sidebar">
    <div class="logo">
      <h2>管理系统</h2>
    </div>
    <el-menu
      :default-active="activeMenu"
      :collapse="false"
      :unique-opened="true"
      :router="true"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
    >
      <sidebar-item
        v-for="route in routes"
        :key="route.path"
        :item="route"
        :base-path="route.path"
      />
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { usePermissionStore } from '@/stores/permission'
import { constantRoutes } from '@/router'
import SidebarItem from './SidebarItem.vue'

const route = useRoute()
const permissionStore = usePermissionStore()

// 当前激活的菜单
const activeMenu = computed(() => {
  const { meta, path } = route
  if (meta?.activeMenu) {
    return meta.activeMenu as string
  }
  return path
})

// 所有路由（公共路由 + 动态路由）
const routes = computed(() => {
  // 过滤掉隐藏的路由
  const publicRoutes = constantRoutes.filter(route => !route.meta?.hidden)
  const dynamicRoutes = permissionStore.addRoutes
  
  return [...publicRoutes, ...dynamicRoutes]
})
</script>

<style scoped>
.sidebar {
  height: 100%;
  overflow-y: auto;
}

.logo {
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #2b2f3a;
  color: #fff;
  margin: 0;
}

.logo h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

:deep(.el-menu) {
  border: none;
}

:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-submenu__title) {
  height: 50px;
  line-height: 50px;
}
</style>
